<template>
	<!-- 345354 -->
	<view class="container">
		<view class="search-bar">
			<view class="search-input-container">
				<view class="search-input-group">
					<input v-model="searchText" placeholder="搜索办公用品名称" type="text" @input="onSearchInput" />
					<button class="iconfont" @click="filteredList">&#xe62a;搜索</button>
					<!-- <uni-icons type="search" size="20"></uni-icons> -->
				</view>
			</view>
		</view>

		<view class="item-info" v-for="item in filteredOfficeList" :key="item.name">
			<view class="item-img">
				<image :src="item.officeImage" mode="cover"></image>
				<!-- 显示最新标签，只有当 isNew 为 true 且 index 不超过 1 时 -->
				<view v-if="item.isNew && index <= 1" class="new-badge">最新</view>
			</view>
			<view class="item-description">
				<view class="item-name" @click="news(item.officeId)">
					{{ item.officeName }}
				</view>
				<view class="item-quantity">
					<view>库存剩余: {{item.officeQuantity}}</view>
					<!-- 领用按钮 -->
					<button class="apply-button" @click="application(item.officeId)">领用</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listOffice
	} from '@/api/system/office'
	import {
		listNews
	} from "@/api/system/news";

	const config = require('@/config.js')
	export default {
		data() {
			return {
				filteredOfficeList: [],
				searchText: '',
				reads: "",
				items: [],
				officeList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 99999999,
					officeName: null,
					officeSpecification: null,
					officeQuantity: null,
					officeImage: null,
				},
				officeParams: {
					pageNum: 1,
					pageSize: 50,
				}
			};
		},
		onLoad() {
			this.footMsgFun() //调用底部方法
		},
		onShow() {
			this.footMsgFun() //调用底部方法
		},
		methods: {
			application(id) {
				this.$tab.navigateTo(`/pages/work/application?id=${id}`)
			},
			news(id) {
				this.$tab.navigateTo(`/pages/work/details?id=${id}`)
			},

			getOfficeParams() {
				listOffice(this.officeParams).then(response => {

					this.officeList = response.rows;
					this.officeList.forEach(item => item.officeImage = config.baseUrl + item.officeImage)
					console.log('===================');
					console.log(this.officeList);
					this.filteredOfficeList = [...this.officeList]; // 复制办公室列表到过滤后的列表
					console.log(this.filteredOfficeList)
				})
			},
			onSearchInput() {
				// 当搜索框内容变化时触发
				this.filteredList(); // 用户输入时调用filteredList方法

			},
			filteredList() {
				console.log("过滤")
				// 根据搜索文本过滤列表
				this.filteredOfficeList = this.officeList.filter(item =>
					item.officeName.toLowerCase().includes(this.searchText.toLowerCase())
				);
			},
			getList() {
				listNews(this.queryParams).then(response => {
					this.items = response.rows;
					this.reads = this.items.reduce((accumulator, item) => {
						if (item.newsRead === 0) {
							return accumulator + 1; // 如果newsRead等于0，累加器加1
						}
						return accumulator; // 否则返回当前累加器的值
					}, 0); // 初始累加器的值设为0

					console.log('未读新闻数量:', this.reads);
					this.footMsgFun();
				});
			},
			footMsgFun() {
				if (this.reads > 0) {
					uni.setTabBarBadge({
						index: 3,
						text: this.reads.toString(),
					});
				} else {
					uni.removeTabBarBadge({
						index: 3,
					});
				}
			}
		},
		created() {
			this.getOfficeParams();
			this.getList();
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.container {
		box-sizing: border-box;

		.search-bar {
			// background-color: saddlebrown;
			padding: 25rpx 25rpx 5rpx 20rpx;

			input {
				padding-left: 20rpx;
				height: 70rpx;
				margin: 0 auto;
				width: 550rpx;
				background-color: white;
				border: rgb(235, 235, 235) 1px solid;
				border-radius: 5%;
				display: inline-block;
			}

			button {
				color: rgb(128, 128, 128);
				background-color: rgb(235, 235, 235);
				height: 70rpx;
				line-height: 70rpx;
			}


		}

		.item-info {
			display: flex;
			flex-direction: row;
			margin: 20rpx;

			.item-img {

				width: 300rpx;
				height: 250rpx;


				image {
					width: 300rpx;
					height: 250rpx;
					background-size: cover;
				}




			}

			.item-description {
				margin-left: 10px;
				width: 380rpx;

				.item-name {

					height: 190rpx;
					font-size: 15px;
					font-weight: 900;
					padding-top: 15rpx;
					line-height: 1.2;
				}

				.item-quantity {
					font-size: 14px;
					height: 60rpx;
					line-height: 70rpx;
					display: flex;
					justify-content: space-between;
					color: black;

					button {
						font-size: 15px;
						background-color: rgb(22, 155, 213);
						height: 60rpx;
						line-height: 60rpx;
						color: white;
						margin: 0;
					}
				}

			}
		}
	}
</style>